<template>
  <div class="app-container" v-loading="loading">
    <el-row type="flex">
      <div class="card left-section">
        <el-row type="flex" justify="space-between">
          <span class="card-title">项目当前实施进度</span>
          <el-date-picker
            style="width: 120px"
            size="mini"
            v-model="projectProcess.year"
            type="year"
            value-format="yyyy"
            :editable="false"
            :clearable="false"
            placeholder="选择年"
            @change="(e) => changeYear('process')"
          />
        </el-row>
        <div
          class="item"
          v-for="(item, index) in projectProcess.data"
          :key="index"
        >
          <div class="item-name">{{ item.projectName }}</div>
          <projectProgress :list="item.periodList" :percentage="item.percent" />
        </div>
      </div>
      <div class="card right-section">
        <el-row type="flex" justify="space-between">
          <span class="card-title">项目经费分布</span>
          <el-date-picker
            style="width: 120px"
            size="mini"
            v-model="projectFunds.year"
            type="year"
            value-format="yyyy"
            :editable="false"
            :clearable="false"
            placeholder="选择年"
            @change="(e) => changeYear('funds')"
          />
        </el-row>
        <div id="bar-chart" style="width: 100%; height: 100%"></div>
      </div>
    </el-row>
    <el-row type="flex" style="margin-top: 20px">
      <div class="card left-section">
        <el-row type="flex" justify="space-between">
          <span class="card-title">项目变更次数</span>
          <el-date-picker
            style="width: 120px"
            size="mini"
            v-model="projectChange.year"
            type="year"
            value-format="yyyy"
            :editable="false"
            :clearable="false"
            placeholder="选择年"
            @change="(e) => changeYear('change')"
          />
        </el-row>
        <div id="line-chart" style="width: 100%; height: 240px"></div>
      </div>
      <div class="card right-section">
        <div class="card-title">年度项目数量统计</div>
        <div id="bar-chart2" style="width: 100%; height: 240px"></div>
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import {
  getProcess,
  getFunds,
  getChangeCount,
  getProjectCount,
} from "@/api2/projectManagement/process";
import projectProgress from "../components/projectProgress";

export default {
  components: { projectProgress },
  data() {
    return {
      loading: false,
      projectProcess: {
        year: "2023",
        data: [],
      },
      projectFunds: {
        year: "2023",
        yAxisData: [],
        zjData: [],
        yyData: [],
        syData: [],
      },
      projectChange: {
        year: "2023",
        xAxisData: [],
        seriesData: [],
      },
      projectCount: {
        year: "2023",
        xAxisData: [],
        zjData: [],
        hxData: [],
        zxData: [],
        zlData: [],
      },
      lineChart: null,
      barChart: null,
      barChart2: null,
    };
  },
  computed: {
    ...mapGetters(["sidebar"]),
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
  watch: {
    isCollapse() {
      setTimeout(() => {
        this.onResize();
      }, 200);
    },
  },
  mounted() {
    this.loading = true;
    Promise.all([
      this.getProcessData(),
      this.getProjectChangeData(),
      this.getProjectCountData(),
    ]).then(() => {
      this.loading = false;
    });

    window.addEventListener("resize", () => {
      this.onResize();
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.onResize();
    });
  },
  methods: {
    onResize() {
      this.lineChart?.resize();
      this.barChart?.resize();
      this.barChart2?.resize();
    },
    async getProcessData() {
      const { year } = this.projectProcess;
      const { data } = await getProcess({ year });
      this.projectProcess.data = data;
      this.getFundsData();
    },
    async getFundsData() {
      const { year } = this.projectFunds;
      let { data } = await getFunds({ year });
      data = data?.reverse() || [];
      this.projectFunds.yAxisData = data.map((item) => item.projectName);
      this.projectFunds.zjData = data.map((item) => item.fundsAmount);
      this.projectFunds.yyData = data.map((item) => item.fundsActual);
      this.projectFunds.syData = data.map((item) => item.fundsRest);
      this.drawBarChart();
    },
    async getProjectChangeData() {
      const { year } = this.projectChange;
      const { data } = await getChangeCount({ year });
      this.projectChange.xAxisData = data?.map((item) => item.projectName);
      this.projectChange.seriesData = data?.map((item) => item.count);
      this.drawLineChart();
    },
    async getProjectCountData() {
      const { year } = this.projectCount;
      const { data } = await getProjectCount({ year });
      this.projectCount.xAxisData = data?.map((item) => item.year);
      this.projectCount.zjData = data?.map((item) => item.total);
      this.projectCount.hxData = data?.map((item) => item.broadwiseProjectNum);
      this.projectCount.zxData = data?.map((item) => item.directionProjectNum);
      this.projectCount.zlData = data?.map((item) => item.owsProjectNum);
      this.drawBarChart2();
    },
    changeYear(type) {
      switch (type) {
        case "process":
          this.getProcessData();
          break;
        case "funds":
          this.getFundsData();
          break;
        case "change":
          this.getProjectChangeData();
          break;
      }
      // this.onResize();
    },
    drawBarChart() {
      this.barChart = echarts.init(document.getElementById("bar-chart"));
      this.barChart.setOption({
        tooltip: { trigger: "axis" },
        legend: { show: true },
        xAxis: {
          type: "value",
          axisLine: { show: true },
        },
        yAxis: {
          type: "category",
          axisTick: { show: false },
          axisLabel: {
            formatter: (params) => {
              var val = "";
              if (params.length > 5) {
                val = params.substr(0, 5) + "...";
                return val;
              } else {
                return params;
              }
            },
          },
          data: this.projectFunds.yAxisData,
        },
        grid: {
          top: "40px",
          left: "10px",
          right: "30px",
          bottom: "5px",
          containLabel: true,
        },
        series: [
          {
            name: "总计",
            type: "bar",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.projectFunds.zjData,
          },
          {
            name: "已用",
            type: "bar",
            stack: "jf",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.projectFunds.yyData,
          },
          {
            name: "剩余",
            type: "bar",
            stack: "jf",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.projectFunds.syData,
          },
        ],
      });
    },
    drawLineChart() {
      this.lineChart = echarts.init(document.getElementById("line-chart"));
      this.lineChart.setOption({
        tooltip: { trigger: "axis" },
        legend: { show: true },
        xAxis: {
          type: "category",
          axisTick: { show: false },
          data: this.projectChange.xAxisData,
        },
        yAxis: {
          type: "value",
          axisLine: { show: true },
        },
        grid: {
          top: "40px",
          left: "20px",
          right: "30px",
          bottom: "10px",
          containLabel: true,
        },
        series: [
          {
            name: "变更次数",
            data: this.projectChange.seriesData,
            type: "line",
            smooth: true,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
                {
                  offset: 0,
                  color: "#3B95FF",
                },
                {
                  offset: 1,
                  color: "rgba(59,149,255,0)",
                },
              ]),
            },
          },
        ],
      });
    },
    drawBarChart2() {
      this.barChart2 = echarts.init(document.getElementById("bar-chart2"));
      this.barChart2.setOption({
        tooltip: { trigger: "axis" },
        legend: { show: true },
        xAxis: {
          type: "category",
          axisTick: { show: false },
          data: this.projectCount.xAxisData,
        },
        yAxis: {
          type: "value",
          axisLine: { show: true },
        },
        grid: {
          top: "50px",
          left: "20px",
          right: "20px",
          bottom: "10px",
          containLabel: true,
        },
        series: [
          {
            name: "总计",
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
            emphasis: {
              focus: "series",
            },
            data: this.projectCount.zjData,
          },
          {
            name: "纵向项目",
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
            emphasis: {
              focus: "series",
            },
            data: this.projectCount.zxData,
          },
          {
            name: "横向项目",
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
            emphasis: {
              focus: "series",
            },
            data: this.projectCount.hxData,
          },
          {
            name: "自立项目",
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
            emphasis: {
              focus: "series",
            },
            data: this.projectCount.zlData,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100%;
  background-color: #f4f5fc;
  .card {
    padding: 20px;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    background-color: #fff;
  }
  .card-title {
    line-height: 28px;
    font-weight: bold;
    color: #1d2e54;
  }
  .left-section {
    width: 60%;
    margin-right: 20px;
  }
  .right-section {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .item {
    margin-top: 20px;
  }
  .item-name {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 5px;
    color: #666;
  }
}
</style>
